/*
 * @Author: yuanxiang 
 * @Date: 2018-05-11 09:15:36 
 * @Last Modified by: hy
 * @Last Modified time: 2018-07-17 10:53:20
 */
<template>
  <div class="gq">
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
      <div slot="main">
        <img class="gqOutViewLogo" src="../../../../../static/img/gq/logomdpi.png" alt="">
            <el-row class="gqOutViewBox">
              <el-col class="gqOutViewxLeftBox" :xl="6" :sm="6" :lg="6" :md="6">
                <div class="gqOutViewxLeftItem">
                  <chart-lay-out :showLine="false">
                    <span slot="title">成交量统计</span>
                    <pie-chart slot="main" v-model="turnoverArr" :option="turnoverOption"></pie-chart>
                  </chart-lay-out>
                </div>
                <div class="gqOutViewxLeftItem">
                  <chart-lay-out :showLine="false">
                    <span slot="title">客户统计</span>
                    <pie-chart slot="main" v-model="genderArr" :option="turnoverOption"></pie-chart>
                  </chart-lay-out>
                </div>
                <div class="gqOutViewxLeftItem">
                  <chart-lay-out :showLine="false">
                    <span slot="title">当月价格趋势</span>
                    <line-chartss slot="main" v-model="priceTrendArr"></line-chartss>
                  </chart-lay-out>
                </div>
              </el-col>
              <el-col class="gqOutViewxCenterBox" :xl="10" :sm="10" :lg="10" :md="10">
                <div class="gqOutViewxCenterItem">
                  <div class="whenMonth">
                    <p class="whenMonthTitle">累计总销售量<i>(吨)</i><span class="gqSubhead">/当月</span></p>
                    <p class="whenMonthNum">
                          <i-count-up
                          :startVal="startVal"
                          :endVal="vmHomePageData.sumOrderWeight"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                        />
                    <span>
                          <i class="gqSubhead">/</i><i-count-up
                          :startVal="startVal"
                          :endVal="vmHomePageData.currentMonthOrderWeight"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                          class="gqSubhead"
                        />
                    </span></p>
                    <div class="chartLine"></div>
                  </div>
                  <div class="whenMonth">
                    <p class="whenMonthTitle">累计总成交额<i>(元)</i><span class="gqSubhead">/当月</span></p>
                    <p class="whenMonthNum">
                          <i-count-up
                          :startVal="startVal"
                          :endVal="vmHomePageData.sumPayMoney"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                        />
                    <span>
                          <i class="gqSubhead">/</i><i-count-up
                          :startVal="startVal"
                          :endVal="vmHomePageData.currentMonthPayMoney"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                          class="gqSubhead"
                        />
                    </span></p>
                  </div>
                </div>
                <div class="gqOutViewxCenterItem">
                    <div class="topRightLLine">
                      <div class="topRightLTopTitleLine">
                      </div>
                      <span class="topRightLTopTitle">钢圈平台统计</span>
                    </div>
                    <div class="row">
                      <div class="whenMonth">
                        <p class="whenMonthTitle">累计销量<i>(元)</i></p>
                        <p class="whenMonthNum">
                              <i-count-up
                              :startVal="startVal"
                              :endVal="vmHomePageData.sumOrderWeightForSteelRing"
                              :decimals="decimals"
                              :duration="duration"
                              :options="options"
                            /></p>
                      </div>
                      <div class="whenMonth">
                        <p class="whenMonthTitle">累计总订单量<i>(单)</i></p>
                        <p class="whenMonthNum">
                              <i-count-up
                              :startVal="startVal"
                              :endVal="vmHomePageData.sumOrderCountForSteelRing"
                              :decimals="decimals"
                              :duration="duration"
                              :options="options"
                            /></p>
                      </div>
                      <div class="whenMonth">
                        <p class="whenMonthTitle">客单量<i>(吨)</i></p>
                        <p class="whenMonthNum">
                              <i-count-up
                              :startVal="startVal"
                              :endVal="vmHomePageData.GuestSingleQuantityForSteelRing"
                              :decimals="decimals"
                              :duration="duration"
                              :options="options"
                            /></p>
                      </div>
                      <div class="whenMonth">
                        <p class="whenMonthTitle">累计用户量<i>(人)</i></p>
                        <p class="whenMonthNum">
                              <i-count-up
                              :startVal="startVal"
                              :endVal="vmHomePageData.sumCustomerForSteelRing"
                              :decimals="decimals"
                              :duration="duration"
                              :options="options"
                            /></p>
                      </div>
                    </div>
                </div>
              </el-col>
              <el-col class="gqOutViewxRightBox" :xl="8" :sm="8" :lg="8" :md="8">
                <div class="gqOutViewxRightItem">
                  <div class="topRightLLine">
                    <div class="topRightLTopTitleLine">
                    </div>
                    <span class="topRightLTopTitle">库存总量：
                      <b>
                        <i-count-up
                              :startVal="startVal"
                              :endVal="inventoryTotalNumber"
                              :decimals="decimals"
                              :duration="duration"
                              :options="options"
                            />
                      </b>
                    </span>
                  </div>
                  <chart :chartStyle="'min-height:230px;height:330px'" :option="repertoryOption" />
                </div>
                <div class="gqOutViewxRightItem">
                  <div class="shipmentData">
                    <div class="shipmentDataTop">
                      <p class="title"><i></i>今日出货量</p>
                      <p class="header">
                        <span>出货地</span>
                        <span>采购方</span>
                        <span>出货量</span>
                        <span>目的地</span>
                      </p>
                    </div>
                    <div id="demo" style="overflow:hidden;height:280px;">
                        <div id="demo1">
                            <ul class="list">
                              <li v-for="(buyitem,index) in buy_items" :key="index">
                                <span>{{ buyitem.supplierName }}</span>
                                <span>{{ buyitem.customerName }}</span>
                                <span>{{ buyitem.totalWeight }}</span>
                                <span>{{ buyitem.freightReceiveProvince }}{{ buyitem.freightReceiveCity }}</span>
                              </li>
                            </ul>
                        </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <!-- 总销售量 客户量 今日出货量 -->
            <div  class="gqOutView">
              <div class="gqOutViewSales">
                <!-- 地图 -->
                <div class="mapCon">
                    <gq-map :areaData="quantity" v-model="buy_items" :placeData="stockAddressArr"></gq-map>
                </div>
              </div>
            </div>
      </div>
    </bg-lay-out>
  </div>
</template>
<script>
import chart from "@/components/Charts/newChart";
import lineChart from "@/components/Charts/lineChart";
import pieChart from "@/components/Charts/pieChart";
import lineChartss from "@/components/Charts/lineChartss";
import barChart from "@/components/Charts/barChart";
import gqMap from "@/components/gq/gqMap";
import ICountUp from "vue-countup-v2";
import echarts from "echarts";
import bgLayOut from "@/components/bgLayOut/index";
import { getTokenName } from "@/utils/auth";
import out from "@/components/model/index";
import chartLayOut from "@/components/Charts/chartLayOut";
import {
  GetHomePageDat,
  GetPlanOrderReportListByToday,
  GetWarehouseSupplierLatLngList,
  GetSteelRingPriceTrend,
  GetWarehouseStockPlaceList
} from "@/api/gq/index";
const lineCircleLowBlue =
  "";
const lineCircleBlue =
  "";
const lineCircle =
  "";
const lineCircleRed =
  "";
const lineIconArr = [
  lineCircleBlue,
  lineCircle,
  lineCircleLowBlue,
  lineCircleRed
];
import _ from "lodash";
export default {
  name: "index",
  components: {
    chart,
    ICountUp,
    gqMap,
    out,
    lineChart,
    barChart,
    pieChart,
    bgLayOut,
    chartLayOut,
    lineChartss
  },
  mounted() {
    this.fetchData();
    this.setTime();
  },
  data() {
    return {
      turnoverOption: {
        legend: { show: false },
        showLabel: true,
        showLine: true,
        startAngle: 150
      },
      isTest: this.$utils.gqIsTestFalse, //  是否测试数据 ture  测试数据  false 正式数据
      quantity: [], // 发单量
      timeScope: null,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      stockAddressArr: [], // 仓库、供应商坐标
      groupPlate: "9004",
      mapOption: {}, // 地图option
      turnoverArr: [], // 成交量统计
      priceTrendArr: {}, // 当月价格趋势
      repertoryOption: {}, // 库存总量
      genderArr: [], // 客户渠道分布
      vmHomePageData: {
        sumOrderCount: 0, // 累计订单数 ,
        sumOrderWeight: 0, // 累计总销量 ,
        sumPayMoney: 0, // 累计总金额 ,
        sumOrderCountForSteelRing: 0, // 钢圈平台累计订单数 ,
        sumOrderWeightForSteelRing: 0, // 钢圈平台累计销量 ,
        sumPayMoneyForSteelRing: 0, // 钢圈平台累计总金额 ,
        GuestSingleQuantityForSteelRing: 0, // 钢圈平台客单量 ,
        sumCustomerForSteelRing: 0, // 钢圈平台累计用户 ,
        currentMonthOrderWeight: 0, // 本月累计销量 ,
        currentMonthPayMoney: 0 // 本月累计金额
      },
      inventoryTotalNumber: 0, // 库存总量
      buy_items: []
    };
  },
  computed: {
    tokenName() {
      return getTokenName();
    }
  },
  beforeDestroy() {
    clearInterval(this.timeScope);
    clearInterval(this.clearCirculation);
  },
  methods: {
    // 每隔3分钟刷新数据
    setTime() {
      var self = this;
      this.timeScope = setInterval(self.fetchData, 180000);
    },
    // 库存总量
    async fetchRepertoryData() {
      try {
        const paramsData = {
          isTest: this.isTest
        };
        var res = await GetWarehouseStockPlaceList(paramsData);
        if (res.data.code === "0") {
          this.$set(this, "inventoryTotalNumber", res.data.result.total);
          var data = res.data.result.list;
          var unit = "各地库存量(吨)";
          var option = this.returnBarOption(data, unit, "#31cee6", "#6937fd");
          this.$set(this, "repertoryOption", option);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // unit:单位  startColor:开始的颜色  endColor:结束的颜色
    returnBarOption(res, unit, startColor, endColor) {
      var xData = [];
      var symbolClip = true;
      var max = 0;
      var data1 = {
        type: "bar",
        name: "",
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: startColor,
              fontWeight: "bold",
              fontFamily: "DIN Condensed Bold",
              fontSize: "22"
            }
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: [30, 30, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: startColor
              },
              {
                offset: 1,
                color: endColor
              }
            ])
          }
        },
        z: 10,
        symbolBoundingData: max,
        data: [],
        barWidth: 21
      };
      res.forEach(item => {
        xData.push(item.name);
        var obj = {};
        max = Number(item.value) > max ? Number(item.value) : max;
        obj.value = item.value;
        obj.symbolClip = symbolClip;
        data1.data.push(obj);
      });
      data1.symbolBoundingData = max;
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          name: unit,
          nameGap: 30,
          nameTextStyle: {
            color: "#31cee6"
          }
        },
        legend: {
          show: false
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.formatterModal(res, params, unit)
        },
        grid: {
          bottom: "20%",
          left: "15%"
        },
        series: [data1]
      };
      return option;
    },
    formatterModal(res, params, unit, color) {
      var minResult = "";
      if (res[0].list) {
        res[params[0].dataIndex].list.forEach(item => {
          var minItem =
            '<div style="display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px"><span>' +
            item.name +
            '</span><span style="margin-top:2px;font-size:20px;font-family:DIN Condensed Bold">' +
            item.value +
            "</span></div>";
          minResult += minItem;
        });
      }
      var index = params[0].dataIndex;
      var val = res[index].value;
      var nowColor = color || "#31cee6";
      var imgConStart =
        '<div style="display:flex;padding:12pt 10px;color:' +
        nowColor +
        ';flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px;">' +
        '<span style="width:100%;font-size:30px;padding:8pt 0 0 0 ;font-family:DIN Condensed Bold">' +
        val +
        "</span>" +
        '<div style="width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt;font-size:12px">';

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    // 趋势统计
    async fetchTendency() {
      try {
        const paramsData = {
          isTest: this.isTest
        };
        var res = await GetSteelRingPriceTrend(paramsData);
        if (res.data.code === "0") {
          var data = res.data.result;
          var legendName = [
            {
              name: "钢坯价格"
            },
            {
              name: "螺纹价格"
            },
            {
              name: "盘螺价格"
            },
            {
              name: "线材价格"
            }
          ];
          this.initGrossProfitChart(data);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 折线图
    initGrossProfitChart(res) {
      var nameArr = ["钢坯价格", "螺纹价格", "盘螺价格", "线材价格"];
      var arr = [];
      res.list.forEach(item => {
        var obj = {
          name: "",
          list: []
        };
        obj.name = item.date;
        arr.push(obj);
      });
      res.list.forEach((arrItem, arrId) => {
        nameArr.forEach((nameItem, nameId) => {
          var innerObj = {
            name: "",
            value: 0
          };
          innerObj.name = nameArr[nameId];
          switch (nameItem) {
            case "钢坯价格":
              innerObj.value = arrItem.billetPrice;
              break;
            case "螺纹价格":
              innerObj.value = arrItem.threadPrice;
              break;
            case "盘螺价格":
              innerObj.value = arrItem.diskPrice;
              break;
            case "线材价格":
              innerObj.value = arrItem.wirePrice;
              break;
            default:
              return 0;
          }
          arr[arrId].list.push(innerObj)
        });
      });
      this.$set(this, "priceTrendArr", arr);
    },
    // 获取库房供应商的坐标
    async fetchStockAddress() {
      const paramsData = {
        isTest: this.isTest
      };
      try {
        var res = await GetWarehouseSupplierLatLngList(paramsData);
        var newArr = [];
        var newSupplierArr = [];
        var newWarehoustArr = [];
        if (res.data.code === "0") {
          var result = res.data.result;
          result.supplierList.forEach(item => {
            var obj = {
              name: item.city,
              value: [item.lng, item.lat],
              label: {
                normal: {
                  formatter: "{b}",
                  right: "20%",
                  show: true,
                  fontSize: "10",
                  color: "#0c43fd"
                }
              },
              itemStyle: { normal: { color: "#3CF1DE" } }
            };
            newSupplierArr.push(obj);
          });
          //  供应商
          result.warehouseList.forEach(item => {
            var obj = {
              name: item.city,
              value: [item.lng, item.lat],
              label: {
                normal: {
                  formatter: "{b}",
                  right: "20%",
                  show: true,
                  fontSize: "10",
                  color: "#3CF1DE"
                }
              },
              itemStyle: { normal: { color: "#0c43fd" } }
            };
            newWarehoustArr.push(obj);
          });
          newArr = newSupplierArr.concat(newWarehoustArr);
          this.stockAddressArr = newArr;
        }
      } catch (e) {
        console.log(e);
      }
    },
    onLogo() {
      this.$router.push("/pages/DataAnalysis");
    },
    getOut() {
      this.$refs.myModel.showModel();
    },
    // 获取大屏展示动态汇总信息
    async fetchGetHomePageDat() {
      try {
        var params = {
          groupPlate: this.groupPlate,
          isTest: this.isTest
        };
        var res = await GetHomePageDat(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "vmHomePageData", result);
          this.$set(this, "genderArr", result.customerList);
          this.$set(this, "turnoverArr", result.orderWeightList);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取大屏滚动信息
    async fetchGetPlanOrderReportListByToday() {
      try {
        var params = {
          groupPlate: this.groupPlate,
          isTest: this.isTest
        };
        var res = await GetPlanOrderReportListByToday(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.buy_items = result.list;
          this.quantity = result.listCount;
        }
      } catch (e) {
        console.log(e);
      }
    },
    fetchData() {
      this.fetchTendency(); // 今日价格趋势
      this.fetchRepertoryData(); // 库存总量

      this.fetchGetHomePageDat();
      this.fetchGetPlanOrderReportListByToday();
      //  、获取库房供应商的坐标
      this.fetchStockAddress();
      this.marQuee();
      var speed = 40; // 数值越大滚动速度越慢
      this.clearCirculation = setInterval(this.marQuee, speed);
    },
    marQuee() {
      // 页面滚动
      var demo = document.getElementById("demo");
      var demo1 = document.getElementById("demo1");
      // var demo2 = document.getElementById("demo2");
      if (demo1 && demo1.offsetTop - demo.scrollTop <= 160) {
        demo.scrollTop -= demo1.offsetHeight;
        demo.scrollTop += 24;
      } else {
        demo.scrollTop++;
      }
    }
  }
};
</script>
<style scoped>
.mapCon {
  position: fixed;
  top: 0;
  right: 0;
}
#app > .hamburger-container img {
  opacity: 0;
}
.gqSubhead {
  color: #31cee6;
}
.gqOutViewLogo {
  position: absolute;
  top: 50px;
  right: 50px;
  width: 107px;
  height: 40px;
  z-index: 99;
}
.lineImg {
  width: 1712px;
  height: 8px;
  background-image: url("../../../../../static/img/bigData4/minLine.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #2ff0d2;
}
.lineCon {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}
.boldFont {
  margin-top: 6pt;
}
.scrollInter {
  width: 100%;
  height: 100%;
  margin-left: 2%;
  overflow-y: scroll;
  padding-right: 17px;
}
.scrollInter::-webkit-scrollbar {
  display: none;
}
.scrollCon::-webkit-scrollbar {
  display: none;
}
.scrollCon {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chartLine {
  width: 1px;
  height: 332px;
  background: rgba(49, 206, 230, 0.2);
  position: absolute;
  right: 0;
  top: 10%;
}
.bottomCon {
  display: flex;
  margin-left: 10pt;
  margin-top: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 1813px;
  height: 393px;
  background-image: url("../../../../../static/img/bigData4/board_l.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #2ff0d2;
}
.midCon {
  display: flex;
  margin-left: 10pt;
  margin-top: 10px;
  flex-direction: column;
  justify-content: space-between;
  width: 1813px;
  height: 792px;
  background-image: url("../../../../../static/img/bigData4/board_xl.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #2ff0d2;
}
.topRightLLine {
  display: flex;
  align-items: center;
  margin-left: 36pt;
  margin-top: 12pt;
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
  color: #2ff0d2;
}
.midRightLTopTitleLine {
  width: 3px;
  height: 20px;
  background: #2ff0d2;
}
.topRightLTopTitleLine {
  width: 3px;
  height: 14px;
  margin-top: 6px;
  background: #2ff0d2;
}
.gqOutViewxRightItem:first-child .topRightLLine {
  display: flex;
  align-items: center;
  margin-left: 36pt;
  margin-top: 20pt;
}
.gqOutViewxRightItem:first-child .topRightLLine .topRightLTopTitle b {
  font-size: 30px;
}
.topRightCon {
  display: flex;
  margin-left: 10pt;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 20pt;
  width: 1420px;
  height: 393px;
  background-image: url("../../../../../static/img/bigData4/board_m.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #2ff0d2;
}
.topLeftCon span {
  font-size: 72px;
  line-height: 72px;
  margin-top: 8pt;
}
topLeftFont {
  font-size: 20px;
}
.topLeftCon b {
  font-size: 72px;
  line-height: 77px;
}
.topLeftCon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20pt;
  background-image: url("../../../../../static/img/bigData4/board_s.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 373px;
  height: 393px;
  color: #2ff0d2;
}
/* topNav  --start */
.topBottomLines {
  bottom: -6pt;
  transition: left 0.5s;
  left: 0;
  height: 3px;
  background: #31cee6;
  position: absolute;
}
.active {
  font-weight: bold;
}
.topNavItemLine {
  width: 20px;
  height: 2px;
  background: #31cee6;
  display: none;
}

.topNavaArrItem {
  display: flex;
  color: rgba(49, 206, 230, 0.8);
  font-size: 18px;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  height: 16px;
  border-left: 1px solid rgba(49, 206, 230, 0.2);
}
.topNavaArrItem:nth-child(1) {
  border-left: 0;
}
.topNavArr {
  width: 100%;
  display: flex;
  height: 79px;
  align-items: flex-end;
  justify-content: center;
}
.bg4Con {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  /* justify-content: flex-end; */
  align-items: center;
  /* background-image: url("../../../../../static/img/bigData4/bg4.jpg"); */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 1080px;
}
.adminName {
  margin-left: 6pt;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.adminOut {
  margin-left: 6pt;
  display: none;
  width: 80px;
  transition: display 0.5s;
  cursor: pointer;
}
.adminLeftIcon {
  margin-left: 6pt;
  background-image: url("../../../../../static/img/bigData4/arrow_right.png");
  transform: rotate(0deg);
  transition: transform 0.5s;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 8px;
  height: 14px;
}
.topNavBarRight {
  margin-right: 0;
  transition: margin-right 1s;
  position: absolute;
  right: 21%;
}
.topNavBarRight:hover .adminLeftIcon {
  transform: rotate(180deg);
}
.topNavBarRight:hover {
  margin-right: 10px;
}
.topNavBarRight:hover .adminOut {
  display: block;
}
.topNavBarRightIcon {
  width: 21px;
  height: 20px;
}
.topNavBarRight {
  color: #31cee6;
  display: flex;
  align-items: center;
}
.topNavBarCenter {
  margin-right: 133px;
  color: #2ff0d2;
  text-align: center;
  width: 100%;
  margin-top: 100px;
  font-size: 28px;
  font-weight: bold;
  margin-top: 100px;
}
.topNavBarLeft {
  width: 94%;
  height: 24px;
  margin-top: 20px;
  margin-left: 33px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topNavBarCon {
  background-image: url("../../../../../static/img/bigData4/topbar.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 1200px;
  height: 124px;
}
.topNavBar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  top: 0;
  position: fixed;
}
/* topNav  --end */
.itemImgText {
  font-size: 2rem;
}
.itemImg {
  width: 20%;
}
.itemImgCon {
  padding: 100px 0;
  width: 100%;
  text-align: center;
}
.topCenter {
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  color: white;
}
.itemCon {
  /* height: 200px; */
  border: 1px solid white;
}
.itemTop {
  width: 100%;
  line-height: 50px;
  height: 50px;
  text-align: center;
  color: white;
  padding: 5px 0;
}

.gqOutView {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 10%;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  width: calc(100% - 80px);
  padding: 0 40px;
  margin: auto;
  color: #2ff0d2;
}
.gqOutView:after {
  content: "";
  display: block;
  clear: both;
}
.gqOutView p {
  margin: 0;
}
.gqOutViewSales {
  flex-grow: 1;
  flex-basis: 0;
  flex-shrink: 1;
  text-shadow: 0 0 20px #000;
}

.allSalesVolume {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 500px;
  height: 212px;
  margin-top: 50%;
  background: url("../../../../../static/img/gq/gqbackgroundmdpi.png") left top /
    100% 100% no-repeat;
}
.allSalesVolume:after {
  content: "钢圈";
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  width: 130px;
  height: 56px;
  margin: auto;
  font-size: 28px;
  background: url("../../../../../static/img/gq/gangquanmdpi.png") left top /
    100% 100% no-repeat;
}
.allSalesVolume .ton,
.pen {
  flex-grow: 1;
  flex-basis: 0;
  flex-shrink: 1;
  text-align: center;
}
.allSalesVolume .ton p:nth-of-type(1),
.pen p:nth-of-type(1),
.whenMonthKc p:nth-of-type(1) {
  font-size: 30px;
}
.allSalesVolume .ton p:nth-of-type(2),
.pen p:nth-of-type(2),
.whenMonthKc p:nth-of-type(2) {
  font-size: 44px;
  font-family: DIN Condensed Bold;
}
.allSalesVolume .ton p i,
.pen p i,
.whenMonthKc p i {
  margin-left: 10px;
  font-style: normal;
  font-size: 18px;
}
.gqOutViewTab {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-grow: 1;
  flex-basis: 0;
  flex-shrink: 1;
}
.gqOutViewTab .customer {
  width: 472px;
  height: 390px;
  padding: 50px 40px;
  background: url("../../../../../static/img/gq/kehuliangmdpi.png") left top
    no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
}
.gqOutViewTab .customerData .title {
  margin-bottom: 8px;
  font-size: 16px;
}
.gqOutViewTab .customerData .title i {
  margin-left: 10px;
  font-style: normal;
}
.gqOutViewTab .customerData .num {
  font-size: 36px;
  font-family: DIN Condensed Bold;
}
.gqOutViewBox
  .gqOutViewxRightBox
  .gqOutViewxRightItem:last-child
  .shipmentData {
  color: #2ff0d2;
}
.gqOutViewBox
  .gqOutViewxRightBox
  .gqOutViewxRightItem:last-child
  .shipmentDataTop {
  font-size: 18px;
  border-bottom: 1px solid rgba(47, 240, 210, 0.3);
}
.gqOutViewBox
  .gqOutViewxRightBox
  .gqOutViewxRightItem:last-child
  .shipmentData
  .title {
  display: flex;
  align-items: center;
  margin-left: 36pt;
  margin-top: 35px;
}
.gqOutViewBox
  .gqOutViewxRightBox
  .gqOutViewxRightItem:last-child
  .shipmentData
  .title
  i {
  display: inline-block;
  width: 3px;
  height: 15px;
  margin-right: 10px;
  background-color: #2ff0d2;
}
.gqOutViewBox
  .gqOutViewxRightBox
  .gqOutViewxRightItem:last-child
  .shipmentData
  .header {
  display: flex;
  width: 100%;
  padding: 30px 0;
}
.gqOutViewBox
  .gqOutViewxRightBox
  .gqOutViewxRightItem:last-child
  .shipmentData
  .header
  span {
  display: inline-block;
  width: calc(100% / 4);
  text-align: center;
}
.gqOutViewBox
  .gqOutViewxRightBox
  .gqOutViewxRightItem:last-child
  .shipmentData
  .list {
  padding: 0;
  margin: 0;
  margin-top: 30px;
  font-size: 18px;
  list-style: none;
}
.gqOutViewBox
  .gqOutViewxRightBox
  .gqOutViewxRightItem:last-child
  .shipmentData
  .list
  li {
  display: flex;
  width: 100%;
  margin-bottom: 35px;
}
.gqOutViewBox
  .gqOutViewxRightBox
  .gqOutViewxRightItem:last-child
  .shipmentData
  .list
  li
  span {
  display: inline-block;
  width: calc(100% / 4);
  text-align: center;
}
.gqOutViewBox
  .gqOutViewxRightBox
  .gqOutViewxRightItem:last-child
  .shipmentData
  .list
  li
  span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.gqOutViewBox {
  width: 100%;
  z-index: 100;
}
.gqOutViewBox .gqOutViewxLeftBox .gqOutViewxLeftItem {
  width: 434px;
  height: 320px;
  padding: 10px 0px;
  background: url("../../../../../static/img/gq/gqOutViewxLeftItembg.png") left
    top no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  margin: 30px 15px 30px 30px;
}
.gqOutViewBox .gqOutViewxCenterBox .gqOutViewxCenterItem {
  width: 770px;
  height: 200px;
  padding: 10px 0px;
  background: url("../../../../../static/img/gq/gqOutViewxCenterItembg.png")
    left top no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
}
.gqOutViewBox
  .gqOutViewxCenterBox
  .gqOutViewxCenterItem:first-child
  .whenMonth {
  width: 49%;
  text-align: center;
  color: #2ff0d2;
  margin-top: 40px;
  position: relative;
  display: inline-block;
}
.gqOutViewBox .gqOutViewxCenterBox .gqOutViewxCenterItem:last-child .whenMonth {
  width: 24%;
  text-align: center;
  color: #2ff0d2;
  margin-top: 30px;
  position: relative;
  display: inline-block;
}
.gqOutViewBox .gqOutViewxCenterBox .gqOutViewxCenterItem .whenMonthBg {
  /* padding: 40px 50px; */
  margin-left: -4px;
  top: 7%;
  position: absolute;
  box-sizing: border-box;
}
.gqOutViewBox
  .gqOutViewxCenterBox
  .gqOutViewxCenterItem:first-child
  .whenMonth
  .whenMonthTitle {
  font-size: 22px;
}
.gqOutViewBox
  .gqOutViewxCenterBox
  .gqOutViewxCenterItem:last-child
  .whenMonth
  .whenMonthTitle {
  font-size: 17px;
}
.gqOutViewBox
  .gqOutViewxCenterBox
  .gqOutViewxCenterItem:last-child
  .whenMonth
  .whenMonthTitle
  span {
  font-size: 15px;
}
.gqOutViewBox
  .gqOutViewxCenterBox
  .gqOutViewxCenterItem
  .whenMonth
  .whenMonthTitle
  i {
  margin: 0 15px;
  font-style: normal;
}
.gqOutViewBox
  .gqOutViewxCenterBox
  .gqOutViewxCenterItem:first-child
  .whenMonth
  .whenMonthTitle
  span {
  font-size: 17px;
}
.gqOutViewBox
  .gqOutViewxCenterBox
  .gqOutViewxCenterItem:first-child
  .whenMonth
  .whenMonthNum {
  font-size: 55px;
  font-family: DIN Condensed Bold;
}
.gqOutViewBox
  .gqOutViewxCenterBox
  .gqOutViewxCenterItem:last-child
  .whenMonth
  .whenMonthNum {
  font-size: 35px;
  font-family: DIN Condensed Bold;
}
.gqOutViewBox
  .gqOutViewxCenterBox
  .gqOutViewxCenterItem:first-child
  .whenMonth
  .whenMonthNum
  span:nth-of-type(2)
  span {
  font-size: 40px !important;
  font-family: DIN Condensed Bold;
}
.gqOutViewBox
  .gqOutViewxCenterBox
  .gqOutViewxCenterItem:first-child
  .whenMonth
  .whenMonthNum
  span:nth-of-type(2)
  i {
  margin-right: 3px;
  font-style: normal;
  font-size: 40px !important;
}
.gqOutViewBox
  .gqOutViewxCenterBox
  .gqOutViewxCenterItem:last-child
  .whenMonth
  .whenMonthNum
  span:nth-of-type(2)
  span {
  font-size: 30px !important;
  font-family: DIN Condensed Bold;
}
.gqOutViewBox
  .gqOutViewxCenterBox
  .gqOutViewxCenterItem:last-child
  .whenMonth
  .whenMonthNum
  span:nth-of-type(2)
  i {
  margin-right: 3px;
  font-style: normal;
  font-size: 30px !important;
}
.gqOutViewBox .gqOutViewxCenterBox .gqOutViewxCenterItem:first-child {
  margin-top: 110px;
}
.gqOutViewBox .gqOutViewxCenterBox .gqOutViewxCenterItem:last-child {
  margin-top: 542px;
}
.gqOutViewBox .gqOutViewxRightBox .gqOutViewxRightItem {
  width: 580px;
  padding: 10px 10px;
  box-sizing: border-box;
  margin: 30px 0px 0px 15px;
}
.gqOutViewBox .gqOutViewxRightBox .gqOutViewxRightItem:first-child {
  height: 440px;
  background: url("../../../../../static/img/gq/gqOutViewxRightItemTopBg.png")
    left top no-repeat;
  background-size: 100% 100%;
  margin-top: 110px;
}
.gqOutViewBox .gqOutViewxRightBox .gqOutViewxRightItem:last-child {
  height: 474px;
  background: url("../../../../../static/img/gq/gqOutViewxRightItemBottomBg.png")
    left top no-repeat;
  background-size: 100% 100%;
}
.gqOutViewBox .gqOutViewxCenterBox .gqOutViewxCenterItem .whenMonth .chartLine {
  width: 1px;
  height: 126px;
  background: rgba(49, 206, 230, 0.2);
  /*background: red;*/
  position: absolute;
  right: 0;
  top: -10%;
}
</style>
